// 时间类
class Time {
  getDate(time, type) {
    let date = this.digitToChinesecharacterHandle(time, type)
    return date
  }

  getNowHour() {
    let date = new Date().getHours()
    return date
  }

  getNowMinute() {
    let date = new Date().getMinutes()
    return date
  }

  getNowSecond() {
    let date = new Date().getSeconds()
    return date
  }
}

// 当前时间特效
class NowTime extends Time{
  constructor() {
    super()
    // 小时数据
    this.s = [{ label: '凌晨一点ㅤ', id: 1, },{ label: '凌晨二点ㅤ', id: 2, },{ label: '凌晨三点ㅤ', id: 3, },{ label: '凌晨四点ㅤ', id: 4, },{ label: '凌晨五点ㅤ', id: 5, },{ label: '凌晨六点ㅤ', id: 6, },{ label: '上午七点ㅤ', id: 7, },{ label: '上午八点ㅤ', id: 8, },{ label: '上午九点ㅤ', id: 9, },{ label: '上午十点ㅤ', id: 10, },{ label: '上午十一点', id: 11, },{ label: '中午十二点', id: 12, },{ label: '下午一点ㅤ', id: 13, },{ label: '下午二点ㅤ', id: 14, },{ label: '下午三点ㅤ', id: 15, },{ label: '下午四点ㅤ', id: 16, },{ label: '下午五点ㅤ', id: 17, },{ label: '傍晚六点ㅤ', id: 18, },{ label: '傍晚七点ㅤ', id: 19, },{ label: '晚上八点ㅤ', id: 20, },{ label: '晚上九点ㅤ', id: 21, },{ label: '晚上十点ㅤ', id: 22, },{ label: '晚上十一点', id: 23, },{ label: '午夜零点ㅤ', id: 24, }]
    // 分钟数据
    this.m = [{ label: '一分ㅤㅤ', id: 1, },{ label: '二分ㅤㅤ', id: 2, },{ label: '三分ㅤㅤ', id: 3, },{ label: '四分ㅤㅤ', id: 4, },{ label: '五分ㅤㅤ', id: 5, },{ label: '六分ㅤㅤ', id: 6, },{ label: '七分ㅤㅤ', id: 7, },{ label: '八分ㅤㅤ', id: 8, },{ label: '九分ㅤㅤ', id: 9, },{ label: '十分ㅤㅤ', id: 10, },{ label: '十一分ㅤ', id: 11, },{ label: '十二分ㅤ', id: 12, },{ label: '十三分ㅤ', id: 13, },{ label: '十四分ㅤ', id: 14, },{ label: '十五分ㅤ', id: 15, },{ label: '十六分ㅤ', id: 16, },{ label: '十七分ㅤ', id: 17, },{ label: '十八分ㅤ', id: 18, },{ label: '十九分ㅤ', id: 19, },{ label: '二十分ㅤ', id: 20, },{ label: '二十一分', id: 21, },{ label: '二十二分', id: 22, },{ label: '二十三分', id: 23, },{ label: '二十四分', id: 24, },{ label: '二十五分', id: 25, },{ label: '二十六分', id: 26, },{ label: '二十七分', id: 27, },{ label: '二十八分', id: 28, },{ label: '二十九分', id: 29, },{ label: '三十分ㅤ', id: 30, },{ label: '三十一分', id: 31, },{ label: '三十二分', id: 32, },{ label: '三十三分', id: 33, },{ label: '三十四分', id: 34, },{ label: '三十五分', id: 35, },{ label: '三十六分', id: 36, },{ label: '三十七分', id: 37, },{ label: '三十八分', id: 38, },{ label: '三十九分', id: 39, },{ label: '四十分ㅤ', id: 40, },{ label: '四十一分', id: 41, },{ label: '四十二分', id: 42, },{ label: '四十三分', id: 43, },{ label: '四十四分', id: 44, },{ label: '四十五分', id: 45, },{ label: '四十六分', id: 46, },{ label: '四十七分', id: 47, },{ label: '四十八分', id: 48, },{ label: '四十九分', id: 49, },{ label: '五十分ㅤ', id: 50, },{ label: '五十一分', id: 51, },{ label: '五十二分', id: 52, },{ label: '五十三分', id: 53, },{ label: '五十四分', id: 54, },{ label: '五十五分', id: 55, },{ label: '五十六分', id: 56, },{ label: '五十七分', id: 57, },{ label: '五十八分', id: 58, },{ label: '五十九分', id: 59, },{ label: '零分ㅤㅤ', id: 60, }]
    // 秒针数据
    this.c = [{ label: '一秒ㅤㅤ', id: 1, },{ label: '二秒ㅤㅤ', id: 2, },{ label: '三秒ㅤㅤ', id: 3, },{ label: '四秒ㅤㅤ', id: 4, },{ label: '五秒ㅤㅤ', id: 5, },{ label: '六秒ㅤㅤ', id: 6, },{ label: '七秒ㅤㅤ', id: 7, },{ label: '八秒ㅤㅤ', id: 8, },{ label: '九秒ㅤㅤ', id: 9, },{ label: '十秒ㅤㅤ', id: 10, },{ label: '十一秒ㅤ', id: 11, },{ label: '十二秒ㅤ', id: 12, },{ label: '十三秒ㅤ', id: 13, },{ label: '十四秒ㅤ', id: 14, },{ label: '十五秒ㅤ', id: 15, },{ label: '十六秒ㅤ', id: 16, },{ label: '十七秒ㅤ', id: 17, },{ label: '十八秒ㅤ', id: 18, },{ label: '十九秒ㅤ', id: 19, },{ label: '二十秒ㅤ', id: 20, },{ label: '二十一秒', id: 21, },{ label: '二十二秒', id: 22, },{ label: '二十三秒', id: 23, },{ label: '二十四秒', id: 24, },{ label: '二十五秒', id: 25, },{ label: '二十六秒', id: 26, },{ label: '二十七秒', id: 27, },{ label: '二十八秒', id: 28, },{ label: '二十九秒', id: 29, },{ label: '三十秒ㅤ', id: 30, },{ label: '三十一秒', id: 31, },{ label: '三十二秒', id: 32, },{ label: '三十三秒', id: 33, },{ label: '三十四秒', id: 34, },{ label: '三十五秒', id: 35, },{ label: '三十六秒', id: 36, },{ label: '三十七秒', id: 37, },{ label: '三十八秒', id: 38, },{ label: '三十九秒', id: 39, },{ label: '四十秒ㅤ', id: 40, },{ label: '四十一秒', id: 41, },{ label: '四十二秒', id: 42, },{ label: '四十三秒', id: 43, },{ label: '四十四秒', id: 44, },{ label: '四十五秒', id: 45, },{ label: '四十六秒', id: 46, },{ label: '四十七秒', id: 47, },{ label: '四十八秒', id: 48, },{ label: '四十九秒', id: 49, },{ label: '五十秒ㅤ', id: 50, },{ label: '五十一秒', id: 51, },{ label: '五十二秒', id: 52, },{ label: '五十三秒', id: 53, },{ label: '五十四秒', id: 54, },{ label: '五十五秒', id: 55, },{ label: '五十六秒', id: 56, },{ label: '五十七秒', id: 57, },{ label: '五十八秒', id: 58, },{ label: '五十九秒', id: 59, },{ label: '六十秒ㅤ', id: 60, }]
    // 背景图片在线地址
    this.url = ''
    // 中间时间中文数组
    this.chinese = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']
    this.random = ['🐮', '🐒', '🐓', '🐕', '🐷', '🐭', '🐯', '🐇', '🐉', '🐍', '🐎', '🐏']
    this.changeTime = 1000 // 变换时长
    this.timer = null
    this.fragmentHour = null
    this.container = null
    this.close = null
    this.dot = null
    this.line = null
    this.hour = null
    this.minute = null
    this.secode = null
    this.center = null
    this.animals = null
    this.secodenum = 0
    this.minutenum = 0
    this.hournum = 0
    this.hourRotateTimer = null
    this.minuteRotateTimer = null
    this.secondRotateTimer = null
    this.randomTimer = null
    this.centerTimer = null
    this.hourRotateNum = 0
    this.minuteRotateNum = 0
    this.secondRotateNum = 0
    this.randomNum = 0
  }

  // 初始化调用功能函数
  init(url = 'https://www.benbenla.cn/images/20111030/benbenla-02d.jpg') {
    this.url = url
    if(document.getElementsByClassName('nowTime-container')[0]) return
    this.fragmentHour = document.createDocumentFragment() // 创建文档碎片 容器
    this.containerFn()
    this.closeFn()
    this.hourFn()
    this.minuteFn()
    this.secodeFn()
    this.dotFn()
    this.lineFn()
    this.centerFn()
    this.falseRotate()
    this.twelveAnimals()
    this.fragmentHour.appendChild(this.container)
    document.body.appendChild(this.fragmentHour)
    this.rotate()
  }

  // 中间圆点功能函数
  dotFn() {
    this.dot = document.createElement('div')
    this.dot.classList.add('nowTime-dot')
    this.dot.style.cssText = `z-index:10;width:5px;height:5px;border-radius:50%;background:rgba(255, 255, 0, .8);position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);`
    this.container.appendChild(this.dot)
  }

  // 中间指针功能函数
  lineFn() {
    this.line = document.createElement('div')
    this.line.classList.add('nowTime-line')
    this.line.style.cssText = `z-index:10;width:400px;height:2px;border-radius:50%;background:rgba(255, 255, 255, .6);position:absolute;left:50%;top:50%;transform:translate(0%, -50%);`
    this.container.appendChild(this.line)
  }

  // 最大容器功能函数
  containerFn(){
    this.container = document.createElement('div')
    this.container.classList.add('nowTime-container') 
    this.container.style.cssText = `user-select:none;position:fixed;width:100%;height:100%;left:0;top:0;z-index:999;background-color:#ccc;`
    this.container.style.backgroundImage = `url(${this.url})`
    this.container.style.backgroundSize = `100% 100%`
  }

  // 关闭按钮功能函数
  closeFn() {
    this.close = document.createElement('div')
    this.close.classList.add('nowTime-close')
    this.close.innerHTML = '×'
    this.close.style.cssText = `position:absolute;color:#fff;right:20px;top:10px;font-size:30px;cursor:pointer;font-weight:1000;`
    this.close.onclick = () => {
      document.body.removeChild(this.container)
    }
    this.container.appendChild(this.close)
  }

  // 时针功能函数
  hourFn() {
    this.hour = document.createElement('div')
    this.hour.classList.add('nowTime-hour')
    this.hour.style.cssText = `transition: all .2s linear;position: absolute;width:400px;height:400px;left:50%;top:50%;transform:translate(-50%, -50%);border-radius:50%;`
    for (let index = 0; index < this.s.length; index++) {
      let hourItem = document.createElement('div') // 创建 24小时 div
      hourItem.style.cssText = `color:rgba(255, 255, 255, 1);position:absolute;right:0;top:48.5%;font-size:13px;transform:rotateZ(${(index) * (360 / 24) + 12}deg);transform-origin:-135px;`
      hourItem.classList.add('nowTime-hourItem')
      hourItem.innerText = this.s[index].label
      this.hour.appendChild(hourItem)
    }
    this.container.appendChild(this.hour)
  }

  // 分针功能函数
  minuteFn() {
    this.minute = document.createElement('div')
    this.minute.classList.add('nowTime-minute')
    this.minute.style.cssText = `transition: all .2s linear;position: absolute;width:600px;height:600px;left:50%;top:50%;transform:translate(-50%, -50%);border-radius:50%;`
    for (let index = 0; index < this.m.length; index++) {
      let minuteItem = document.createElement('div') // 创建 60分钟 div
      minuteItem.style.cssText = `color:rgba(255, 255, 255, 1);position:absolute;right:0;top:48.5%;font-size:13px;transform:rotateZ(${(index) * (360 / 60) - 2}deg);transform-origin:-248px;`
      minuteItem.classList.add('nowTime-minuteItem')
      minuteItem.innerText = this.m[index].label
      this.minute.appendChild(minuteItem)
    }
    this.container.appendChild(this.minute)
  }

  // 中间年月日功能函数
  centerFn() {
    this.center = document.createElement('div')
    this.center.classList.add('nowTime-center')
    setTimeout(() => {
      this.center.innerHTML =  this.getDate(new Date().getFullYear(), 'year') + this.getDate(new Date().getMonth() + 1, 'month') + this.getDate(new Date().getDate(), 'day')
    }, this.changeTime + 1)
    this.center.style.cssText = `font-weight:1000;font-size:13px;color:#fff;position: absolute;left:51%;top:48.8%;transform:translate(-50%, -50%);`
    this.container.appendChild(this.center)
  }

  // 秒针功能函数
  secodeFn() {
    this.secode = document.createElement('div')
    this.secode.classList.add('nowTime-secode')
    this.secode.style.cssText = `transition: all .2s linear;position: absolute;width:800px;height:800px;left:50%;top:50%;transform:translate(-50%, -50%);border-radius:50%;`
    for (let index = 0; index < this.m.length; index++) {
      let secodeItem = document.createElement('div') // 创建 60秒 div
      secodeItem.style.cssText = `color:rgba(255, 255, 255, 1);position:absolute;right:0;top:48.5%;font-size:13px;transform:rotateZ(${(index) * (360 / 60) - 1.6}deg);transform-origin:-348px;`
      secodeItem.classList.add('nowTime-secodeItem')
      secodeItem.innerText = this.c[index].label
      this.secode.appendChild(secodeItem)
    }
    this.container.appendChild(this.secode)
  }

  // 最开始展示的时候，旋转的特效
  falseRotate() {
    if(this.hourRotateTimer) clearInterval(this.hourRotateTimer)
    if(this.minuteRotateTimer) clearInterval(this.minuteRotateTimer)
    if(this.secondRotateTimer) clearInterval(this.secondRotateTimer)
    if(this.randomTimer) clearInterval(this.randomTimer)
    if(this.centerTimer) clearInterval(this.centerTimer)
    this.hourRotateTimer = setInterval(()=>{
      this.hourRotateNum += 1
      this.hour.style.transform = `translate(-50%, -50%) rotateZ(${-15 * this.hourRotateNum}deg)`
    },50)

    this.minuteRotateTimer = setInterval(()=>{
      this.minuteRotateNum += 1
      this.minute.style.transform = `translate(-50%, -50%) rotateZ(${6 * this.minuteRotateNum}deg)`
    },50)

    this.secondRotateTimer = setInterval(()=>{
      this.secondRotateNum += 1
      this.secode.style.transform = `translate(-50%, -50%) rotateZ(${-6 * this.secondRotateNum}deg)`
    },50)

    this.randomTimer = setInterval(()=>{
      if(this.randomNum > 11) this.randomNum = 0
      this.animals.innerHTML = this.random[this.randomNum]
      this.randomNum += 1
    },50)

    this.centerTimer = setInterval(()=>{
      let year_random = Math.floor(Math.random(0, 1) * 10) + '' + Math.floor(Math.random(0, 1) * 10) + '' + Math.floor(Math.random(0, 1) * 10) + '' + Math.floor(Math.random(0, 1) * 10)
      let month_day_random = Math.floor(Math.random(0, 1) * 10) + '' + Math.floor(Math.random(0, 1) * 10)
      this.center.innerHTML = this.getDate(year_random, 'year') + this.getDate(month_day_random, 'month') + this.getDate(month_day_random, 'day')
    },50)

    setTimeout(()=> {
      this.hourRotateNum = 0
      this.minuteRotateNum = 0
      this.secondRotateNum = 0
      clearInterval(this.hourRotateTimer)
      clearInterval(this.minuteRotateTimer)
      clearInterval(this.secondRotateTimer)
      clearInterval(this.randomTimer)
      clearInterval(this.centerTimer)
      this.initNum()
    }, this.changeTime)
  }

  // 初始化number以及 旋转到当前时间点
  initNum() {
    this.hournum = this.getNowHour()
    this.minutenum = this.getNowMinute()
    this.secodenum = this.getNowSecond()
    this.hour.style.transform = `translate(-50%, -50%) rotateZ(${-15 * this.hournum}deg)`
    this.minute.style.transform = `translate(-50%, -50%) rotateZ(${-6 * (this.minutenum - 1)}deg)`
    this.secode.style.transform = `translate(-50%, -50%) rotateZ(${-6 * (this.secodenum - 1)}deg)`
  }

  // 秒针旋转， 每60s 分针转一圈，每60分m  时针转一圈
  rotate() {
    if(this.timer) clearInterval(this.timer)
    this.timer = setInterval(() => {
      ++this.secodenum
      if(this.secodenum && this.secodenum % 60 === 0){
        if(this.minutenum >= 60){
          this.minutenum = 0
        }else{
          this.minutenum += 1
        }
        this.minute.style.transform = `translate(-50%, -50%) rotateZ(${-6 * (this.minutenum - 1)}deg)`
      }

      if(this.minutenum && this.minutenum % 60 === 0){
        if(this.hournum >= 24){
          this.hournum = 0
        }else{
          this.hournum += 1
        }
        this.hour.style.transform = `translate(-50%, -50%) rotateZ(${-15 * this.hournum}deg)`
      }
      this.secode.style.transform = `translate(-50%, -50%) rotateZ(${-6 * (this.secodenum - 1)}deg)`
    }, 1000)
  }

  // 将数字年份转为汉字年份
  digitToChinesecharacterHandle(time, type) {
    let res = ''
    time = time.toString().split('')
    time.forEach(item => {
      res = res + this.chinese[item * 1]
    })
    if(type === 'year'){
      res = res + '年ㅤ'
    }else if(type === 'month'){
      res = res + '月ㅤ'
    }else if(type === 'day'){
      res = res + '日ㅤ'
    }
    return res
  }

  // 当年生肖功能函数
  twelveAnimals() {
    this.animals = document.createElement('div')
    this.animals.classList.add('nowTime-animals')
    setTimeout(()=> {
      this.animals.innerHTML = this.animalsFn(new Date().getFullYear())
    }, this.changeTime + 1)
    this.animals.style.cssText = `z-index:10;color:#fff;font-size:30px;font-weight:1000;position:absolute;left:50%;top:46%;transform:translate(-50%, -50%);`
    this.container.appendChild(this.animals)
  }

  // 判断是什么生肖
  animalsFn(year) {
    let res = ''
    switch(year % 12) {
      case 0:
        res = '🐒'
        break
      case 1:
        res = '🐓'
        break
      case 2:
        res = '🐕'
        break
      case 3:
        res = '🐷'
        break
      case 4:
        res = '🐭'
        break
      case 5:
        res = '🐮'
        break
      case 6:
        res = '🐯'
        break
      case 7:
        res = '🐇'
        break
      case 8:
        res = '🐉'
        break
      case 9:
        res = '🐍'
        breakma
      case 10:
        res = '🐎'
        break
      case 11:
        res = '🐏'
        break
    }
    return res
  }
}

export default new NowTime()